<template>
  <el-dialog
    :title="title + '广告位'"
    :visible.sync="isShow"
    width="45%"
    @close="cancel"
  >
    <el-form
      ref="formRef"
      :rules="formRules"
      :model="formData"
      class="info-form"
      label-width="210px"
    >
          <el-form-item label="广告位名称" prop="advposname">
            <el-input
              size="medium"
              v-model="formData.advposname"
              placeholder="请输入广告位名称"
              style="width:70%;"
            ></el-input>
          </el-form-item>

          <el-form-item label="广告位描述" prop="advposdesc">
            <el-input
              size="medium"
              v-model="formData.advposdesc"
              placeholder="请输入广告位描述"
              style="width:70%;"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>

          <el-form-item label="广告位尺寸" prop="advpossize">
            <el-input
              size="medium"
              v-model="formData.advpossize"
              placeholder="请输入广告位尺寸"
              style="width:70%;"
            ></el-input>
          </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/adv/pos'
const formRules = {
  advposdesc: [
    { required: true, message: '广告位描述类型必须！', trigger: 'blur' }
  ],
  advposname: [
    { required: true, message: '广告位名称类型必须！', trigger: 'blur' }
  ],
  advpossize: [
    { required: true, message: '广告位尺寸类型必须！', trigger: 'blur' }
  ]
}
const defaultItem = {
  advposdesc: '', // 广告位描述
  advposname: '', // 广告位名称
  advpossize: '' // 广告位尺寸
}
export default {
  name: 'posInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: { ...defaultItem },
      formRules
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    //  获取单行信息回显
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.isAdd = false
      this.isShow = true
    },
    //  增加或更新提交
    async submit () {
      //  验证
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning('验证失败')
      }
      //  提交
      if (this.isAdd) {
        await addData(this.formData)
        this.$message.success('添加成功')
      } else {
        await updateData(this.formData)
        this.$message.success('修改成功')
      }
      // 更新列表
      this.$emit('update-list')
      // 关闭
      this.cancel()
    },
    cancel () {
      this.isShow = false
      this.isAdd = true
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
